import QtQuick 1.1
import com.nokia.meego 1.0
import QtWebKit 1.0

//import "tools"
import "Script.js" as Script
import "pages"

Page {
    id: page
//    tools: commonTools
    onVisibleChanged: {
        if(pageStack.depth == 1){
            console.debug("Visible" + pageStack.depth)
            showWeb();
        }

    }
    function zoomPlus(){
        if(webview.scale <= 1.40)
        {
           webview.scale = webview.scale + 0.10
            pageFlickableContent.anchors.rightMargin = pageFlickableContent.anchors.rightMargin + 10
            Script.zoom_text += 0.10
            moins.enabled = true
//            text_zoom.text = Math.round( Script.zoom_text * 100 )/100 + "x";
        }
        else
        {
            plus.enabled = false
        }
    }
    function zoomMoins(){
        if(webview.scale >= 1.10)
        {
           webview.scale = webview.scale - 0.10;
            pageFlickableContent.anchors.rightMargin = pageFlickableContent.anchors.rightMargin - 10
            Script.zoom_text -= 0.10
            plus.enabled = true
//            text_zoom.text = Math.round( Script.zoom_text * 100 )/100 + "x";
        }
        else
        {
            moins.enabled = false
        }
    }
    function loading(){
        busyindicator.opacity = 1
        busyindicator.running = true

        progress.opacity = 1
    }
    function loadingFinish(){
        busyindicator.running = false
        busyindicator.opacity = 0

        progress.opacity = 0
    }
    function hidenWeb(){
        webview.opacity = 0;
        console.debug("Hide Web OK")
    }
    function showWeb(){
        webview.opacity = 1;
        console.debug("Show Web OK")
    }
    function progressWeb(value){
        progress.value = value
    }

    property string title : "QInfoTrafic"
    state: "zoom_hide"
    tools: ToolBarLayout {
            id: toolBarLayout
            ToolIcon {
                   visible: pageStack.depth > 1
                   platformIconId: "toolbar-back"
                   onClicked: {
                       pageStack.pop();
                   }
               }
            ToolButton {
                id: plus
                width: 60
                text: "+"
                anchors.right: zone.left
                anchors.rightMargin: 20
                onClicked: zoomPlus()
            }
            ToolButton {
                id: moins
                width: 60
                text: "-"
                enabled: false
                anchors.left: zone.right
                anchors.leftMargin: 20
                onClicked: zoomMoins()
            }
            ToolButton {
                id: zone
                width: 100
                text: "Zone -"
                anchors.horizontalCenter: parent.horizontalCenter
                onClicked: webview.back.trigger()
            }
            ToolIcon {
                id: settings
                platformIconId: "toolbar-view-menu"
                onClicked: {
                   menu.open()
               }
            }
        }
    Menu{
        id: menu
        MenuLayout{
            MenuItem { text: qsTr("A Propos"); onClicked: aboutDialog.open()}
            MenuItem { text: qsTr("Recharger la carte"); onClicked: { webview.reload.trigger()}}
            MenuItem { text: qsTr("Temps de parcours"); onClicked:{
                    appWindow.pageStack.push(Qt.resolvedUrl("pages/Choix.qml"))
                    hidenWeb();
                }
            }
            MenuItem { text: qsTr("France"); onClicked:{
                    appWindow.pageStack.push(Qt.resolvedUrl("pages/France.qml"))
                }
            }
        }
    }
    Image {
        id: pageHeader
        anchors {
            top: page.top
            left: page.left
            right: page.right
        }

        height: parent.width < parent.height ? 72 : 46
        width: parent.width
        source: "image://theme/meegotouch-view-header-fixed" + (theme.inverted ? "-inverted" : "")
        z: 1

        Label {
            id: header
            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                leftMargin: 16
            }
            platformStyle: LabelStyle {
                fontFamily: "Nokia Pure Text Light"
                fontPixelSize: 32
            }
            text: page.title
        }

        BusyIndicator {
            id: busyindicator
            x: 294
            y: 15
            width: 50
            height: 50
            anchors.top: parent.top
            opacity: 0;
            anchors.topMargin: 15
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 15
            anchors.right: parent.right
            anchors.rightMargin: 21
            Behavior on opacity { NumberAnimation { duration: 600 }}
        }
        ProgressBar{
            id: progress
            anchors.top: busyindicator.bottom
            anchors.right: parent.right
            anchors.rightMargin: 21
            opacity: 0
            Behavior on opacity { NumberAnimation { duration: 600 }}

        }
    }

    Flickable {
        id: pageFlickableContent
        width: 800
        height: 800
        anchors {
            top: pageHeader.bottom
            bottom: page.bottom
            left: page.left
            right: page.right
//            margins: 16
            margins: 0
        }
        contentHeight: webview.height
        contentWidth: webview.width
        flickableDirection: Flickable.AutoFlickDirection

//            Button{
//                text: qsTr("Click here!")
//                onClicked: appWindow.showStatusBar = !appWindow.showStatusBar
//            }

            WebView{
                id: webview
                url: "http://www.sytadin.developpement-durable.gouv.fr/opencms/sites/sytadin/sys/raster_fs.jsp.html_1819265885.html"
                preferredWidth: pageFlickableContent.width
                preferredHeight: pageFlickableContent.height
                onLoadStarted: loading()
                onLoadFinished: loadingFinish()
                onLoadFailed: console.debug("Erreur dans le chargement de la page")
                onProgressChanged: progressWeb(webview.progress)
                Behavior on opacity { NumberAnimation { easing.type: Easing.InQuad; duration: 200 }}

            }
    }

    ScrollDecorator {
        flickableItem: pageFlickableContent
    }
}
